/**
 * All rights Reserved, Designed By 信鸥科技
 * project : office-design
 * Created by youquer on 18/2/1.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { List, Card, Row, Col, Input, Progress, Button, Icon, Menu,
  Popconfirm, message, Form
} from 'antd';
import { Link, routerRedux, Route, Redirect, Switch } from 'dva/router';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './Tab.less';
//权限
const FormItem = Form.Item;
import SmartTable from '../../components/BaseTable';
//tabClassify
import {  checks } from '../../utils/authority';


/**
 * name: 名称
 * type: 类型 1-标签 2-分类
 * classify 1-新闻 2-产品
 * pid: 一级分类id
 * id: id
 * */

@connect(state => ({
  tab: state.tab,
}))
@Form.create()
export default class Tab extends PureComponent{

  /** 组件周期 **/
  componentDidMount(){
    const {dispatch} = this.props;
    dispatch({
      type: 'tab/clear',
    });
    dispatch({
      type: 'tab/fetch',
    })
  }

  /*** 搜索开始 **/
  renderForm() {
    return this.renderSimpleForm();
  }
  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form layout="inline">
        <Row md={8} lg={24} xl={48}>
          <Col md={8} sm={24}>
            <FormItem label="名称">
              {getFieldDecorator('name')(
                <Input name="name" onChange={this.inputChange.bind(this)} placeholder="请输入搜索内容" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button style={{ marginLeft: 8 }} type="primary" onClick={this.handleSearch.bind(this)}>查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset.bind(this)}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  handleSearch = (e) => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.setState({
      pageSize: 5
    });
    dispatch({
      type: "tab/fetch",
    })
  };
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      pageSize: 10
    });
    dispatch({
      type: 'tab/save',
      payload: {name: "", pageSize: 10},
    });
    dispatch({
      type: 'tab/fetch',
      payload: {pageSize: 10, type: this.state.type}
    });
  };
  /*** 搜索结束 **/
  /*** 赋值回调开始 **/
  //input
  inputChange(e){
    var key = e.target.name;
    var value = e.target.value;
    var t = {};
    t[key] = value;
    const { dispatch } = this.props;
    dispatch({
      type: "tab/save",
      payload: t
    })
  }
  /*** 赋值回调结束 **/
  /*** 分页回调结束 **/

  /*** 分页回调结束 **/

  /*** 删除 ***/
  handleDelete(id) {
    const { dispatch } = this.props;
    dispatch({
      type: 'tab/del',
      payload: {id: id}
    });
  }
  cancel(){
    message.error('您取消了删除!');
  }
  /*** 删除结束 ***/


  render(){

    /** 数据 **/
    const { dispatch, tab: { loading, dataList, page, total, pageSize,  } } = this.props;

    /** table **/
    const columns = [
      {
        key: 'index',
        title: '序号',
        dataIndex: 'index',
        render: (text) => {
          return <div className={styles.id_width}>{text}</div>
        }
      },
      {
        key: 'name',
        title: '名称',
        dataIndex: 'name',
        render: (text, row) =>
          <div className={styles.desc_width}>{text}</div>
      },
      {
        key: 'classify',
        title: '类型',
        dataIndex: 'classify',
        // filters: tabClassify,
        filterMultiple: false,
        render: (text) =>{

          var title = '通用标签';
          // if (text > 0){
          //   title = tabClassify[text-1].text
          // }
          return <div className={styles.desc_width}>{title}</div>
        }
      },
      {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 105,
        render: (record) => {
          var actions = [];
          if (checks('/admin/property/tab/del')){
            actions.push(
              <Popconfirm key='delete' title="你确定要删除吗?" onConfirm={() => this.handleDelete(record.id)} onCancel={this.cancel}>
                <a href="#">删除</a>
              </Popconfirm>
            )
          }
          if (checks('/admin/property/tab/del') && checks('/admin/property/tab/update')){
            actions.push(
              <span key="line" className={styles.splitLine} />
            );
          }
          if (checks('/admin/property/tab/update')){
            actions.push(
              <Link key="edit" to={{pathname: "/data/tabAdd", search: '?id=' + record.id + "&type=0"}}>编辑</Link>
            );
          }
          return(
            <div>
              {actions}
            </div>
          )
        }
      }
    ];
    var type = "tab";
    const scroll = { x: 800 };
    var data = [];
    if (dataList){
      for (var i = 0; i < dataList.length; i++){
        var item = dataList[i];
        item["index"] = i + (page - 1) * pageSize + 1;
        data.push(item);
      }
    }
    const stateArray = "stateList";
    var upDateAction = "/fetch";
    const param = {
      columns,
      data,
      total,
      page,
      pageSize,
      scroll,
      type,
      loading,
      stateArray,
      dispatch,
      upDateAction
    };
    /** table **/

    var addArr = [];
    if (checks('/admin/property/tab/add')){
      addArr.push(
        <div key="add" className={styles.tableListOperator}>
          <Link to="/data/tabAdd"><Button icon="plus">新建</Button></Link>
        </div>
      )
    }

    return(
      <PageHeaderLayout
        title={'标签列表'}
      >
        <Card bordered={false}>
          <div className={styles.tableListForm}>
            {this.renderForm()}
          </div>
          {addArr}
        </Card>
        <Card
          style={{ marginTop: 24 }}
          bordered={false}
          bodyStyle={{ padding: '8px 32px 32px 32px' }}
        >
          <SmartTable {...param}/>
        </Card>
      </PageHeaderLayout>
    )
  }
}
